<template>
  <div id="home">
    <!-- 顶部导航栏 -->
    
    <NavBar class="home-nav"><span slot="center">购物街</span></NavBar>
    <!-- 伪装TabControl -->
    <TabControl 
    class="tab-control" 
    :tabControlItem="['流行', '新款', '精选']"
    @tabControlClick="tabControlClick(arguments)"
    ref="tabControl2"
    :class="{isFixed: isTabControlShow}"
    :style="{opacity: opacity}"/>

    <!-- 滚动区域 -->
    <Scroll class="conent" 
    ref="scroll" 
    @scroll="scrollContent" 
    :probe-type="3" 
    @pullingUp="pullingUp"
    :pull-up-load="true">
       <!-- 轮播图 -->
      <HomeSwiper @imgLoaded="imgLoaded"></HomeSwiper>
      <!-- 推荐信息 -->
      <HomeRecommend :homeRecommends="recommend" @imgLoaded="imgLoaded"></HomeRecommend>
      <!-- 本周推荐 -->
      <FeatureView @imgLoaded="imgLoaded"></FeatureView>
      <!-- TabControl -->
      <TabControl 
      class="tab-control" 
      :tabControlItem="['流行', '新款', '精选']"
      @tabControlClick="tabControlClick(arguments)"
      ref="tabControl1"/>
      <!-- 展示商品 -->
      <GoodsList :goodsList="showGoodList"></GoodsList>
    </Scroll>

    <!-- 返回顶部 -->
    <GoBack @click.native="goBackClick" v-show="isGoBackShow"/>

  </div>
</template>

<script>
            /* 公共组件导入 */
import NavBar from 'components/common/navbar/NavBar';
import HomeSwiper from './childCops/HomeSwiper';
import Scroll from 'components/common/scroll/Scroll';

            /* 业务组件导入 */
import HomeRecommend from './childCops/HomeRecommend';
import FeatureView from './childCops/FeatureView';
import TabControl from 'components/context/tabconrtrol/TabControl';
import GoodsList from 'components/context/goods/GoodsList';


            /* 方法导入 */
import {homeMultidata, homeGoodsMultidata} from 'network/home';

/* 公共方法 */
/* import { debounce } from 'common/utils.js'; */
import { imgItemListerMixin, backTop } from 'common/mixin';
  
  

export default {
  name: 'home',
  data() {
    return {
      recommend: [],
      goods: {
        pop: {page: 0, list: [], y: 0},
        new: {page: 0, list: [], y: 0},
        sell: {page: 0, list: [], y: 0}
      },
      goodsCurrentIndex: 'pop', // 流行、精选、新款
      // isGoBackShow: false,// 展示goback按钮(mixin)
      isTabControlOffsetTop: 0,// tabControl距离顶部的高度
      isTabControlShow: false,// 是否显示tabControl
      opacity: 1,// 用透明度决定tabControl是否显示
      scrollY: 0 // 离开时页面滚动的高度
    }
  },
  mixins: [imgItemListerMixin, backTop],
  computed: {
    showGoodList() {// 控制tab栏  展示对应的商品
      return this.goods[this.goodsCurrentIndex].list;
    }
  },
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommend,
    FeatureView,
    TabControl,
    GoodsList,
    Scroll,
    // GoBack(mixin中)
  },
  created() {
    //请求recommend内容
    this.homeMultidata();

    //请求goods内容
    this.homeGoodsMultidata('pop');
    this.homeGoodsMultidata('new');
    this.homeGoodsMultidata('sell');
  },
  mounted() {// minxin中
  },
  activated() {// 选中该组件时
   this.$refs.scroll.scrollBack(this.scrollY);// 返回离开时页面的高度位置
  },
  deactivated() {// 离开该组件时
    this.scrollY = this.$refs.scroll.getscrollY();// 离开时保存屏幕的高度的位置
    // console.log(this.scrollY);
    this.$bus.$off('imgitemLoaded', this.imgItemLister);
  },
  methods: {
    //网络请求封装
    homeMultidata() {// recommend数据请求
      homeMultidata().then((result) => {
        this.recommend = result.data.recommend.list;
        console.log(this.recommend);
      }).catch((err) => {
        console.log(err);  
      });

    },
    homeGoodsMultidata(type) {// goods数据请求
      //每次的请求数据+1页
      const page = this.goods[type].page + 1;
      
      homeGoodsMultidata(type, page).then(res => {
        this.goods[type].list.push(...res.data.list);
        this.$refs.scroll.finishPullUp();
        // console.log(res);
        
      }).catch(err => {
      })
      this.goods[type].page += 1;// page + 1

    },

    /* 寻常方法 */
    tabControlClick(data) {// tab控制监听事件
      const index = data[0];
      const type = data[1];

      this.recordPageY();// 记录点击之前tabControl的选项（pop/new/sell）,并赋予离开时的高度值
      
    
      switch(index) {// 根据相应的index返回定义的字符串
        case 0: this.goodsCurrentIndex = 'pop'
        break;

        case 1: this.goodsCurrentIndex = 'new'
        break;

        case 2: this.goodsCurrentIndex = 'sell'
        break;
      }

      //将伪tabControl 和 tabControl内部的currentIndex计数器统一
      this.$refs.tabControl1.currentIndex = index;
      this.$refs.tabControl2.currentIndex = index;

      this.tabControlChangeRun();// tabControl点击时执行BScroll跳转到对应高度

      
    },
    recordPageY() {// 记录点击之前tabControl的选项（pop/new/sell）,并赋予离开时的高度值
      this.goods[this.goodsCurrentIndex].y = this.$refs.scroll.getscrollY()
    },
    tabControlChangeRun() {// tabControl点击时执行BScroll跳转到对应高度
      const y = this.goods[this.goodsCurrentIndex].y;
      const top = this.isTabControlOffsetTop;

      if(Math.abs(y) > top) {// 当前选项y值大于tabControl的高度跳转到对应高度
        this.$refs.scroll.scrollBack(y);
      }else if (Math.abs(y) == 0){// 当前选项y值为0（初始化时）点击成为吸顶效果
        this.$refs.scroll.scrollBack(-top);
      }
    },
    scrollContent(position) {// 监听内容发生滚动的位置
      this.isGoBackShow = (-position.y) > 1000; // 位置决定是否显示返回顶部GoBack
      this.isTabControlShow = (-position.y) > this.isTabControlOffsetTop;// 达到tabControl高度即为true
      if(this.isTabControlShow) {// 根据isTabControlShow 决定opacity的值
        this.opacity = 1;
      } else {
        this.opacity = 0;
      }
    },
    pullingUp() {// 上拉加载更多
      this.homeGoodsMultidata(this.goodsCurrentIndex);
    },
    imgLoaded() {// 轮播图片加载完成，接收事件
      this.isTabControlOffsetTop = this.$refs.tabControl1.$el.offsetTop
    }
     /* goBackClick() {//返回顶部(mixin)
      this.$refs.scroll.scrollTop(0, 0)
      
    }, */
  }
}
</script>

<style scoped>
  /* home这整个大盒子的样式 */
  #home{
    height: 100vh;
    position: relative;
  }
          /* 顶部导航栏 navbar样式 */
  .home-nav{
    background-color: var(--color-tint);
    color: #fff;
    width: 100%;
    
  }
  
  /* scroll样式方案一 */
/*   .conent{   
    height: calc(100% - 40px);
    overflow: hidden;
  } */

    /* scroll样式方案二 */
  .conent{
   position: absolute;
   right: 0;
   left: 0;
   bottom: 49px;
   top: 44px;
    overflow: hidden;
  }

  /* 伪装的TabControl */
  .isFixed{
    position: relative;
    z-index: 90;
  }
</style>